<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Edit page the the object 'Ficha'</title>

    <script src="../js/jquery-2.1.1.js" type="application/javascript"></script>
    <script src="../js/jquery-ui.js" type="application/javascript"></script>
    <link href="../css/jquery-ui.css" rel="stylesheet">
    <link href="../css/jquery-ui.structure.css" rel="stylesheet">
    <link href="../css/jquery-ui.theme.css" rel="stylesheet">

    <script src="../bootstrap/js/bootstrap.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">

    <script src="../js/coma.js" type="application/javascript"></script>
    <!--<script src="../js/bootstrap-datepicker.js"></script>-->
    <!--<link href="../css/datepicker.css">-->

    <script type="text/javascript">
        function mostrar() {
            document.getElementById('oculto').style.display = 'block';
        }
    </script>

    <script>
        $(function () {

            $(document).ready(function () {
                $('.date').datepicker({
                    pickDate: true,
                    showToday: true,
                    useStrict: true,
                });
            });
        });
    </script>

    <style>
        .big_check {
            width: 16px;
            height: 16px;
        }
        .nomargin {
            margin-left: 0px;
            margin-right: 0px;
            padding-left: 0px;
            padding-right: 0px;
        }
    </style>


</head>

<body style="max-width: 1024px;">
    <div id="container">
        <h1>Administración</h1>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Listado de usuarios &nbsp;&nbsp;
                   </h3>
                <br>
                 <button onclick="showAdminPannel()" class="btn btn-primary" >Refrescar</button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <button onclick="createUser()"  class="btn btn-success">Nuevo</button>
            </div>
            <div class="panel-body">
                <div id="tbl_usuarios"></div>
            </div>
        </div>
        <div class="panel panel-default" id="panel_usuario">
            <div class="panel-heading">
                <h3 class="panel-title">Editar usuario</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="form-group col-md-4">
                        <label class="col-md-4 control-label" for="nombre">Nombre Usuario</label>
                        <div class="col-md-5">
                            <input id="username" type="text" placeholder="..." class="form-control input-md">
                        </div>
                        <div class="col-md-3">
                            <input id="id" type="text" placeholder="..." class="form-control input-md" readonly>
                        </div>
                    </div>

                    <div class="form-group col-md-4">
                        <label class="col-md-4 control-label" for="nombre">Rol</label>
                        <div class="col-md-8">
                            <select id="role" class="form-control input-md">
                                <option>(Seleccione)</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group col-md-4">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="admin">Administrador
                            </label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-4">
                        <label class="col-md-4 control-label" for="nombre">Nombre</label>
                        <div class="col-md-8">
                            <input id="nombre" type="text" placeholder="..." class="form-control input-md">
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        <label class="col-md-4 control-label" for="nombre">Apellidos</label>
                        <div class="col-md-8">
                            <input id="surname" type="text" placeholder="..." class="form-control input-md">
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        <label class="col-md-4 control-label" for="nombre">Email</label>
                        <div class="col-md-8">
                            <input id="email" type="text" placeholder="..." class="form-control input-md">
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="form-group col-md-4">
                        <label class="col-md-4 control-label" for="nombre">Teléfono</label>
                        <div class="col-md-8">
                            <input id="phone" type="text" placeholder="..." class="form-control input-md">
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        <label class="col-md-4 control-label" for="nombre">Cambiar Password</label>
                        <div class="col-md-8">
                            <input id="password" type="password" placeholder="Introduzca nuevo" class="form-control input-md">
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        <label class="col-md-4 control-label" for="nombre">Repetir</label>
                        <div class="col-md-8">
                            <input id="password_repeat" type="password" placeholder="Confirme" class="form-control input-md">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <label class="col-md-12" id="change">&nbsp;</label>
                    </div>
                    <div class="col-md-4">
                        <button id="save" type="button" class="btn btn-primary" onclick="saveUser()">Guardar</button>
                        <button id="cancel" type="button" class="btn btn-warning" onclick="cancelEditUser()">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Ajustes de la aplicación</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="form-group col-md-6">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="chk_debug" onchange="debug=$('#chk_debug').is(':checked')">Habilitar trazas en cliente(console.log)
                            </label>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label class="col-md-12" id="change">descargar fichero de configuración <a href="business.xml">business.xml</a></label>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>